<template>
    <div class="home">
        <div class="left">
            <el-card>
                <div slot="header">
                    <el-button style="padding: 0; font-size: 16px;" icon="el-icon-sunrise-1" type="text">今日计划</el-button>
                    <el-link type="info" style="float: right;font-size: 16px;">{{todayDate | dateFilter}}</el-link>
                </div>
                <div v-if="Object.keys(todayPlanObj).length === 0">
                    <el-card shadow="hover" :body-style="{lineHeight: '28px'}">
                        暂未制定计划哦～
                    </el-card>
                </div>
                <div v-else>
                    <el-tag type="warning">{{todayPlanObj.title}}</el-tag>
                    <el-divider></el-divider>
                    <el-card shadow="hover" :body-style="{lineHeight: '28px'}">
                        {{todayPlanObj.content}}
                    </el-card>
                    <el-divider></el-divider>
                    <div style="text-align: right;">
                        <el-popover
                        placement="top"
                        v-model="visible"
                        >
                            <p style="font-size: 15px; color: #333; margin: 10px"><i style="color: #E6A23C; margin-right: 4px;" class="el-icon-question"></i>真的按计划完成了吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="visible = false">骚凹瑞</el-button>
                                <el-button type="primary" size="mini" @click="sureDonePlan">完成</el-button>
                            </div>
                            <el-button slot="reference" :type="todayPlanObj.state === '1' ? 'info' : 'success'" size="medium" :disabled="todayPlanObj.state === '1' ? true : false" icon="el-icon-check" plain>{{todayPlanObj.state === '1' ? '已完成' : '确认完成'}}</el-button>
                        </el-popover>
                        <el-button :type="todayPlanObj.state === '1' ? 'info' : 'primary'" size="medium" :disabled="todayPlanObj.state === '1' ? true : false" icon="el-icon-d-arrow-right" plain @click="$router.push('add?notEmpty=1')">转至明日</el-button>
                    </div>
                </div>
            </el-card>
            <el-card>
                <div slot="header">
                    <el-button style="padding: 0; font-size: 16px;" icon="el-icon-moon-night" type="text">明日计划</el-button>
                    <el-link type="info" style="float: right;font-size: 16px;">{{tomorrowDate | dateFilter}}</el-link>
                </div>
                <div v-if="Object.keys(tomorrowPlanObj).length === 0">
                    <el-card shadow="hover" :body-style="{lineHeight: '28px'}">
                        暂未制定计划哦～
                    </el-card>
                </div>
                <div v-else>
                    <el-tag type="warning">{{tomorrowPlanObj.title}}</el-tag>
                    <el-divider></el-divider>
                    <el-card shadow="hover" :body-style="{lineHeight: '28px'}">
                        {{tomorrowPlanObj.content}}
                    </el-card>
                </div>
            </el-card>
        </div>
        <div class="right">
            <el-card>
                <el-button type="danger" icon="el-icon-edit" plain @click="$router.push('add')">制定计划</el-button>
                <el-button type="primary" icon="el-icon-tickets" plain @click="$router.push('history')">查看历史</el-button>
            </el-card>
            <el-card>
                <div slot="header">
                    <el-button style="padding: 0; font-size: 16px;" icon="el-icon-timer" type="text">今日倒计时</el-button>
                </div>
                <div>
                    <CountDown :endDate="tomorrowDate" @timeout="handleTimeout"></CountDown>
                </div>
            </el-card>
            <el-card>
                <div slot="header">
                    <el-button style="padding: 0; font-size: 16px;" icon="el-icon-warning-outline" type="text">温馨提示</el-button>
                </div>
                <div class="tips">
                    <p>契而舍之，朽木不折；</p>
                    <p>契而不舍，金石可偻。</p>
                    <p>当天的计划请务必能<span>当天完成</span>哦。</p>
                    <p>计划一旦制定就<span>不可修改</span>哦，请务必考虑清楚再制定计划哦。</p>
                    <p>建议晚上<span> 22:00 至 23:00 </span>进行今日计划完成进度结算，并制定好明日计划。</p>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import moment from 'moment'
import CountDown from '../components/CountDown.vue'

@Component({
    components: {
        CountDown
    },
    filters: {
        dateFilter(data){
            return data.replace(/-/g, '/')
        }
    },
})
export default class Home extends Vue {
    visible: boolean =  false
    todayDate: string = ''
    tomorrowDate: string =  ''
    todayPlanObj: object = {}
    tomorrowPlanObj: object = {}

    mounted() {
        this.getDate()
        this.getTodayPlan()
        this.getTomorrowPlan()
    } 
    
    
    getDate(): void{
        this.todayDate = moment().format('YYYY-MM-DD')
        this.tomorrowDate = moment().add(1, 'days').format('YYYY-MM-DD')
    }
    handleTimeout(): void{
        this.getDate()
        this.getTodayPlan()
        this.getTomorrowPlan()
    }
    getTodayPlan(): void{
        this.$http({
            url: 'phpbin/tomorrowplan/getPlanList.php',
            method: 'get',
            params: {
                date: this.todayDate
            }
        }).then(res => {
            if (res.data.content.list.length !== 0) {
                this.todayPlanObj = res.data.content.list[0]
                this.$store.dispatch('setTodayPlanActions', res.data.content.list[0])
            }else{
                this.todayPlanObj = {}
            }
        })
    }
    getTomorrowPlan(): void{
        this.$http({
            url: 'phpbin/tomorrowplan/getPlanList.php',
            method: 'get',
            params: {
                date: this.tomorrowDate
            }
        }).then(res => {
            if (res.data.content.list.length !== 0) {
                this.tomorrowPlanObj = res.data.content.list[0]
            }else{
                this.tomorrowPlanObj = {}
            }
        })
    }
    sureDonePlan(): any{
        this.visible = false
        if (moment().format('YYYY-MM-DD') !== this.todayDate) {
            return this.$message.error('骚凹瑞～没有按时完成哦～穷哈！')
        }
        this.$http({
            url: 'phpbin/tomorrowplan/updatePlan.php',
            method: 'get',
            params: {
                date: this.todayDate
            }
        }).then(res => {
            this.$message.success('恭喜！完成了今日计划！再接再厉呦～')
            this.getTodayPlan()
        })
    }
}
</script>

<style lang="less" scoped>
.home{
    display: flex;
    .left{
        flex: 2;
        padding: 0 30px;
        margin: 30px 0;
        border-right: 1px solid #EBEEF5;
    }
    .right{
        flex: 1;
        padding: 30px;
        .tips{
            p{
                text-align: center;
                padding: 6px 0;
                line-height: 24px;
                span{
                    font-weight: bold;
                    color: #F56C6C;
                }
            }
        }
    }
}
</style>